<template>
  <view class="input-box">
    <view class="input-group" :class="active?'active':''">
      <view v-if="label" class="input-label" :style="{width: offset + 'em'}">{{label}}</view>
      <view class="input-body" :style="{paddingLeft: label ? offset + 'em' : 0, }">
        <slot>
          <input @focus="focus" @blur="blur" :type="type" :disabled="disabled" :maxlength="length" class="input" :password="password" :value="value" :placeholder="tags" @input="onInput"/>
          <view v-if="clear" class="clear">
            <CustomIcon v-show="field" color="#0ED485" size="14" type="delete-fill" @click.stop.native="clearField"/>
          </view>
        </slot>
        <view class="extra" @click.stop="$emit('click-right')">
          <CustomIcon v-if="rightIcon" color="#999" size="14" :type="rightIcon" />
          <text v-if="rightText">{{rightText}}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import CustomIcon from './custom-icon.vue'
  export default {
    name: 'CustomInput',
    components: {
      CustomIcon,
    },
    data: function () {
      return {
		  active: false
      }
    },
    props: {
      label: {
        type: [Boolean, String],
        default: false
      },
      offset: {
        type: String,
        default: '4'
      },
      value: {
        type: [String, Number],
        default: ''
      },
      tags: {
        type: String,
        default: ''
      },
      rightIcon: {
        type: String,
        default: ''
      },
      rightText: {
        type: String,
        default: ''
      },
      clear: {
        type: Boolean,
        default: false
      },
	  disabled: {
	    type: Boolean,
	    default: false
	  },
      password: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        default: 'text'
      },
	  length: {
		type: Number,
		default: -1
	  }
    },
    computed: {
      clearIcon: function () {
        return this.field ? true : false
      },
    },
    methods: {
      onInput: function(event) {
        this.$emit('input', event.target.value);
      },
      clearField: function() {
        this.$emit('change', '')
      },
	  focus: function() {
		this.active = true
		this.$emit('active', true);
	  },
	  blur: function() {
		this.active = false
		this.$emit('active', false);
	  }
    }
  }
</script>
<style scoped lang="scss">
  .input-box {
    width: 100%;
    box-sizing: border-box;
  }

  .input-group {
    position: relative;
    display: flex;
    align-items: center;
    height: calc(1.5em + 24px);
    padding: 0;
    font-size: $uni-font-size-base;
    border-bottom: 1px solid transparentize($uni-border-color, 0.5);
	&.active {
		border-color: $uni-border-color;
	}

    .input-label {
      position: absolute;
      color: #999999;
      text-align: left;
	  line-height:42px;
    }

    .input-body {
      width: 100%;
      font-size: $uni-font-size-base;
      color: $uni-text-color;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .extra {
      margin-left: 16px;
      color: #999;
    }
    .clear {
      padding-right: 5px;
    }
    
    .input {
      width: 100%;
      font-size: inherit;
    }
  }
</style>
